<template>
    <el-card>
        <el-row :gutter="20" class="header">
            <el-col :span="5">
                <el-input size="large" placeholder="文章标题" clearable v-model="ListDto.title"></el-input>
            </el-col>
            <el-button size="large" @click="initArticleList" :icon="'Search'" type="primary">搜索</el-button>
            <el-button size="large" @click="handleDialogValue" :icon="'Plus'" type="primary">新增</el-button>
        </el-row>

        <el-table border :data="tableData" style="width: 100%" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column show-overflow-tooltip prop="title" label="标题" width="120" />
            <el-table-column show-overflow-tooltip prop="summary" label="概要" width="200" />
            <el-table-column show-overflow-tooltip prop="content" label="内容" width="200" />
            <el-table-column prop="viewCount" label="浏览量" width="140" />
            <el-table-column prop="likeCount" label="收藏数" width="140" />
            <el-table-column prop="status" label="状态" width="100">
                <template v-slot="{ row }">
                    <el-tag size="large" v-if="row.status == 0" type="success">发布</el-tag>
                    <el-tag size="large" v-else type="danger">草稿</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="thumbnail" label="封面" width="300">
                <template v-slot="{ row }">
                    <div style="height: 100px; width: 100%;">
                        <el-image style="width: 100%; height: 100%" :src="row.thumbnail" fit="fill" />
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="createTime" label="创建时间" width="140" />
            <el-table-column fixed="right" label="Operations" width="200">
                <template v-slot="scoped">
                    <el-button @click="handleEdit(scoped.row)" size="large" type="primary" :icon="'Edit'" circle />
                    <el-button size="large" type="danger" :icon="'Delete'" circle />
                </template>
            </el-table-column>
        </el-table>

        <el-pagination v-model:current-page="ListDto.pageNum" v-model:page-size="ListDto.pageSize"
            :page-sizes="[1, 3, 5, 30]" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { getArticleListAPI } from '@/api/index.js'
import { useArticleStore } from '@/store/article/index.js'
import { useRouter } from 'vue-router'

const $router = useRouter()
let tableData = ref([])

const ListDto = reactive({
    pageSize: 10,
    pageNum: 1,
    spotName: '',
    status: '',
})

let total = ref(0)

const initArticleList = async () => {
    let res = await getArticleListAPI(ListDto)
    tableData.value = res.rows
    total.value = Number(res.total)
}

const handleSizeChange = (val) => {
    ListDto.pageSize = val
    initArticleList()
}
const handleCurrentChange = (val) => {
    ListDto.pageNum = val
    initArticleList()
}

const changeStatus = async (val) => {

    // const res = await changeUserStatusAPI({
    //     "id": val.id,
    //     "status": val.status
    // })
    // ElMessage.success("更新成功")
}

const handleEdit = (val) => {
    useArticleStore().setTitle("更新")
    useArticleStore().setArticleValue(val)
    useArticleStore().setId(val.id)
    $router.push({
        path: '/content/article',
    }).catch(err => { })
}

const handleDialogValue = () => {
    useArticleStore().setTitle("发布")
    useArticleStore().setArticleValue({})
    useArticleStore().setId(-1)
    $router.push({
        path: '/content/article',
    }).catch(err => { })
}

initArticleList()

</script>

<style lang="scss" scoped>
:deep(.el-dialog__header) {
    border-bottom: 1px solid #333 !important;
}

:deep() {
    .el-popper {
        width: 800px !important;
    }
}
</style>